<template>
	<view>
		<u-popup :show="show" mode="right" @close="changeSearch(false)" bgColor="#efefef">
			<!-- 搜索框 -->
			<view class="searchbox">
				<view class="topsearch">
					<u-search
						:showAction="true"
						:placeholder="defaultKeyword.keyword"
						v-model="keyword"
						actionText="取消"
						@custom="closeFn"
						shape="square"
						bgColor="#f7f8fa"
						placeholderColor="#c8c9cc"
						@change="helperFn(keyword)"
					></u-search>
				</view>
			</view>
			<!-- 默认显示 -->
			<view class="init" v-show="initShow">
				<view class="default" v-show="isShow">
					<!-- 历史记录 -->
					<view class="history">
						<view class="top">
							<text>历史记录</text>
							<u-icon name="trash" color="#7b7b7b" size="24" @tap="clearhistoryFn"></u-icon>
						</view>
						<view class="item-box">
							<view class="item" v-for="(item, index) in historyKeywordList" :key="index" @tap="showProduct(item)">{{ item }}</view>
						</view>
					</view>
					<!-- 热门搜索 -->
					<view class="hot history">
						<view class="top"><text>热门搜索</text></view>
						<view class="item-box">
							<view class="item" v-for="(item, index) in hotKeywordList" :key="index" @tap="showProduct(item.keyword)">{{ item.keyword }}</view>
						</view>
					</view>
				</view>
				<!-- 搜索提示 -->
				<view class="tip" v-show="!isShow">
					<view class="tip-item" v-for="(item, index) in tips" :key="index" @tap="showProduct(item)">{{ item }}</view>
					<view class="last">没有更多了</view>
				</view>
			</view>
			<!-- 商品列表 -->
			<view class="goodlist" v-show="!initShow">
				<view class="list">
					<view class="item" v-for="item in goodsList" :key="item.id">
						<image :src="item.list_pic_url" mode="widthFix"></image>
						<view class="text">
							<view class="title">{{ item.name }}</view>
							<view class="price">{{ item.retail_price | priceFormat }}</view>
						</view>
					</view>
				</view>
				<view class="last">没有更多了</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
// 数据接口
import { searchData, clearhistory, helper, listData } from '@/utils/api.js';
export default {
	name: 'searchComp',
	data() {
		return {
			// 显示隐藏
			isShow: true,
			// 默认
			defaultKeyword: [],
			// 热门历史
			hotKeywordList: [],
			// 清除历史
			historyKeywordList: [],
			// 搜索框文本
			keyword: '',
			// 搜索提示
			tips: [],
			// 初始显示
			initShow: true,
			// 商品列表
			goodsList: []
		};
	},
	computed: {
		...mapState({
			show: state => state.search.show
		})
	},
	methods: {
		...mapMutations({
			changeSearch: 'search/changeSearch'
		}),
		closeFn() {
			this.changeSearch(false);
			this.keyword = '';
			this.isShow = true;
			// this.
		},
		// 清除历史
		async clearhistoryFn() {
			let clear = await clearhistory();
			console.log(clear);
		},
		// 搜索框搜索事件
		async helperFn(keyword) {
			this.isShow = true;
			let res = await helper(keyword);
			this.tips = res.data;
			// console.log(res);
			if (this.keyword == '') {
				this.isShow = true;
				this.tips = [];
				for (let i = 0; i < this.hotKeywordList.length; i++) {
					this.tips.push(this.hotKeywordList[i].keyword);
					this.initShow = true;
				}
			}
			// 搜索商品显示
		},
		async showProduct(item) {
			this.keyword = item;
			this.isShow = false;
			let res = await listData({
				keyword: this.keyword,
				page: 1,
				size: 20,
				order: 'desc',
				categoryId: 0,
				sort: 'id'
			});
			// console.log(res.data);
			this.goodsList = res.data.goodsList;
			this.initShow = false;
			if (res.data.count === 0) {
				// this.
			}
		}
	},
	async created() {
		let res = await searchData();
		// console.log(res);
		let { defaultKeyword, hotKeywordList, historyKeywordList } = res.data;
		this.defaultKeyword = defaultKeyword;
		this.hotKeywordList = hotKeywordList;
		this.historyKeywordList = historyKeywordList;
		// 填充tips
		for (let i = 0; i < hotKeywordList.length; i++) {
			this.tips.push(hotKeywordList[i].keyword);
		}
		// console.log(this.tips);
	}
};
</script>

<style lang="less" scoped>
// page {
// 	background-color: #efefef;
// }

.topsearch {
	padding: 10px 12px;
	width: 750rpx;
	box-sizing: border-box;
	border-bottom: 1px solid #efefef;
	background-color: #fff;
}
.history {
	padding: 10px;
	margin-bottom: 20px;
	background-color: #fff;
	.top {
		font-size: 36rpx;
		display: flex;
		justify-content: space-between;
	}
	.item-box {
		// width: 90%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		.item {
			line-height: 38rpx;
			padding: 0 4rpx;
			font-size: 24rpx;
			border: 1rpx solid #969799;
			color: #969799;
			margin-right: 10px;
			margin-bottom: 10px;
		}
	}
}
.hot {
	.item {
		&:first-child {
			border: 1rpx solid #ff2f2f;
			color: #ff2f2f;
		}
	}
}
.tip {
	.tip-item {
		box-sizing: border-box;
		padding: 10px 16px;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		border-bottom: 1px solid #efefef;
	}
	.last {
		color: #969799;
		font-size: 14px;
		line-height: 50px;
		text-align: center;
	}
}
.goodlist {
	.list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 10px;
		box-sizing: border-box;
		width: 100%;
		background: #fff;
		.item {
			width: 49%;
			background: #fff;
			text-align: center;
			margin-bottom: 10px;
			padding-bottom: 10px;
			image {
				width: 100%;
			}
			.price {
				margin-top: 5px;
				color: darkred;
			}
		}
	}

	.last {
		color: #969799;
		font-size: 14px;
		line-height: 50px;
		text-align: center;
	}
}
</style>
